<!-- 课程信息 -->
<template>
  <div>
    <el-card>
      <el-row>
        <el-form ref="form" :model="searchDto" inline label-suffix=":">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="searchDto.keywords"
              placeholder="请输入关键字"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-s-open" type="primary" @click="clear"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="courseClick">课程信息</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="$router.go(-1)">返回</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <page-table
        ref="recovery"
        :page-data="pageData"
        :loading="loading"
        :do-get-page-data="getPageData"
      >
        <el-table-column type="index" label="编号" width="80" align="center" />
        <el-table-column prop="courseName" label="课程名称" align="center" />
        <el-table-column prop="teacherName" label="教师" align="center" />
        <el-table-column prop="stuName" label="学员姓名" align="center" />
        <el-table-column prop="check" label="签到" align="center" />
        <el-table-column prop="sign" label="线上确认" align="center" />
      </page-table>
    </el-card>
    <el-dialog
      title="课程信息"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-form :model="form">
        <el-form-item label="课程总时间：" prop="totalTime"
          >{{ form.totalTime||0 }} 小时</el-form-item
        >
        <el-form-item prop="courseMap">
          <el-card>
            <el-calendar v-model="dateValue">
              <template slot="dateCell" slot-scope="{ date, data }">
                <div :class="data.isSelected ? 'is-selected' : ''">
                  <p style="padding: 0; margin: 0">
                    {{ data.day.split("-")[2] }}
                  </p>
                  <div
                    v-if="data.type == 'current-month'"
                    style="padding: 0; margin: 0"
                  >
                     <template v-for="(val, idx) in form.courseMap">
                        {{parseInt(idx) === parseInt(data.day.split("-")[2]) ? "✔️" : ""}}
                      </template>
                  </div>
                </div>
              </template>
            </el-calendar>
          </el-card>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  name: "courseInfo",
  data() {
    return {
      sex: "",
      dialogVisible: false,
      pageData: {},
      loading: false,
      form: {},
      searchDto: {
        institutionId: null,
        pageIndex: null,
        pageSize: null,
        keywords: null,
      },
      hourInfo: {
        institutionId: null,
        year: null,
        month: null,
      },
      dateValue:new Date()
    };
  },
  watch:{
    dateValue(val){
      const nowMonth = val.getMonth() + 1;
      const year = String(val.getFullYear());
      this.hourInfo.year = year;
      this.hourInfo.month = nowMonth;
      this.getCourseData()
      console.log('watch:', this.hourInfo,nowMonth,year);
    }
  },
  created() {
    console.log("this.$route.params.row;", this.$route.query.institutionId);
    this.searchDto.institutionId = this.$route.query.institutionId;
    this.hourInfo.institutionId = this.searchDto.institutionId;
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getCourseAndStuAndSignInfoPageList(tem).then((ret) => {
        console.log("ret:", ret);
        this.pageData = ret.data;
      });
    },

    // 查询
    search() {
      this.getPageData({ pageIndex: 1 });
    },

    //清空
    clear() {
      this.$refs.form.resetFields();
      this.getPageData();
    },
    courseClick() {
      this.dialogVisible = true;
      this.getCourseData();
    },
    // 获取上课信息
    getCourseData() {
      this.form.totalTime= 0;
      this.form.courseMap={};
      this.API.getClassHourInfoInfoByInstitutionId(this.hourInfo).then(
        (ret) => {
          console.log("getCourseData:", ret);
          this.form = ret.data;
        }
      );
    },
    // 监听上个月、下个月

  },
  mounted() {
    this.getPageData();
  },
};
</script>
<style scoped lang="scss"></style>
          